<template>
  <div style="width: 214px;height: 214px;">
    <canvas ref="canvasRef" width="214" height="214" style="background-color: transprent;"></canvas>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'

const props = defineProps({
  ratio1: { type: Number, default: 48 }, // 第一个扇形比例 (0-100)
  ratio2: { type: Number, default: 48 }, // 第二个扇形比例 (0-100)
  color1: { type: String, default: '#FF5733' },
  color2: { type: String, default: '#33FF57' }
})

const canvasRef = ref(null)

function drawRing() {
  const canvas = canvasRef.value
  const ctx = canvas.getContext('2d')

  // 清除画布
  ctx.clearRect(0, 0, canvas.width, canvas.height)

  const centerX = canvas.width / 2
  const centerY = canvas.height / 2
  const radius = 90 // 外半径
  const lineWidth = 10 // 环的宽度
  const gapPercent = 1 // 间隔百分比

  // 计算可用比例（总比例100%减去间隔比例）
  const availableRatio = 100 - (gapPercent * 2)

  // 调整比例确保总和为可用比例
  const adjustedRatio1 = (props.ratio1 / (props.ratio1 + props.ratio2)) * availableRatio
  const adjustedRatio2 = availableRatio - adjustedRatio1

  // 转换为弧度
  const ratio1Rad = (adjustedRatio1 / 100) * 2 * Math.PI
  const ratio2Rad = (adjustedRatio2 / 100) * 2 * Math.PI
  const gapRad = (gapPercent / 100) * 2 * Math.PI

  // 从12点钟方向开始绘制
  let startAngle = -Math.PI / 2

  // 绘制第一个间隔
  drawGap(ctx, centerX, centerY, radius, lineWidth, startAngle, gapRad)
  startAngle += gapRad

  // 绘制第一个扇形
  if (adjustedRatio1 > 0) {
    const endAngle = startAngle + ratio1Rad
    drawSector(ctx, centerX, centerY, radius, lineWidth, startAngle, endAngle, props.color1, true)
    startAngle = endAngle
  }

  // 绘制第二个间隔
  drawGap(ctx, centerX, centerY, radius, lineWidth, startAngle, gapRad)
  startAngle += gapRad

  // 绘制第二个扇形
  if (adjustedRatio2 > 0) {
    const endAngle = startAngle + ratio2Rad
    drawSector(ctx, centerX, centerY, radius, lineWidth, startAngle, endAngle, props.color2, true)
  }

  // 添加环形边框
  drawBorder(ctx, centerX, centerY, radius, lineWidth)
}

// 绘制带直角端点的扇形
function drawSector(ctx, x, y, radius, lineWidth, startAngle, endAngle, color, squareEnds) {
  ctx.beginPath()
  ctx.arc(x, y, radius, startAngle, endAngle)

  if (squareEnds) {
    const innerX = x + (radius - lineWidth) * Math.cos(endAngle)
    const innerY = y + (radius - lineWidth) * Math.sin(endAngle)
    ctx.lineTo(innerX, innerY)
  }

  ctx.arc(x, y, radius - lineWidth, endAngle, startAngle, true)

  if (squareEnds) {
    const outerX = x + radius * Math.cos(startAngle)
    const outerY = y + radius * Math.sin(startAngle)
    ctx.lineTo(outerX, outerY)
  }

  ctx.closePath()
  ctx.fillStyle = color
  ctx.fill()
}

// 绘制间隔（使用百分比弧度）
function drawGap(ctx, centerX, centerY, radius, lineWidth, angle, gapRad) {
  ctx.beginPath()
  ctx.arc(centerX, centerY, radius - lineWidth, angle, angle + gapRad)
  ctx.arc(centerX, centerY, radius, angle + gapRad, angle, true)
  ctx.closePath()
  ctx.fillStyle = '#FFFFFF'
  ctx.fill()
}

// 绘制环形边框
function drawBorder(ctx, centerX, centerY, radius, lineWidth) {
  // 保存当前绘图状态
  ctx.save();
  
  // 绘制外边框（向外扩展1px）
  ctx.beginPath();
  ctx.arc(centerX, centerY, radius + 1, 0, Math.PI * 2);
  ctx.strokeStyle = '#000';
  ctx.lineWidth = 1;
  ctx.stroke();
  
  // 绘制内边框（向内收缩1px）
  ctx.beginPath();
  ctx.arc(centerX, centerY, radius - lineWidth - 1, 0, Math.PI * 2);
  ctx.stroke();
  
  // 恢复绘图状态
  ctx.restore();
}

onMounted(drawRing)
watch(() => [props.ratio1, props.ratio2, props.color1, props.color2], drawRing)
</script>

<style scoped>
canvas {

  border-radius: 50%;
}
</style>